<template>
  <div class="content">
    <nav-title title="我的信息"/>
    <div class="top-bg">
      <div class="portrait" :style="{backgroundImage: 'url(' + headfimg + ')' }"></div>
    </div>
    <div class="uinfo">
      <div><h6 style="font-weight:bold;">{{ userName }}</h6><img :src="sexf"/></div>
      <div>{{ rsFullName }}</div>
      <div>{{ jobcodeDescr }}</div>
      <div><img src="./image/mphIcon.png"><h6>{{ userMobile }}</h6></div>
      <div><img src="./image/tphIcon.png"><h6>{{ userPhone }}</h6></div>
      <div><img src="./image/emailIcon.png"><h6>{{ userEmail }}</h6></div>
    </div>
    <div class="sub-btn-content">
      <div class="sub-detail" @click="goHome">详细信息</div>
    </div>
  </div>
</template>
<script>
  import sexFa from '../userInfo/image/sexf.png'
  import { getBasicUser,getBasicInfo } from '../../api/api'

  export default {
    mounted(){
      if(this.$store.state.eid){
        this.emplid = this.$store.state.eid
        this.userDetail();
      }
    },
    methods: {
      userDetail() {
        //根据 emplId,cSeqno 获取用户信息
        var params = {
          emplid: this.emplid
        };
        getBasicInfo(params).then(res=>{
          //成功：000000
          if(res && res.retCode === '000000'){

            this.userEmail = res.retData.cEmailAddr;
            this.userPhone = res.retData.phone1;
            this.userMobile = res.retData.phone;
            this.userName = res.retData.name;
            this.rsFullName = res.retData.rsFullName;
            this.jobcodeDescr = res.retData.jobcodeDescr;
            if(res.retData.sex === 'F'){
              this.sexf = require('../userInfo/image/sexf.png');
            }else if(res.retData.sex === 'M'){
              this.sexf = require('../userInfo/image/sexm.png');
            }
            if(res.retData.photoUrl && res.retData.photoUrl != '' && res.retData.photoUrl != ' '){
              this.headfimg = this.$store.state.picRootURL+res.retData.photoUrl;
            }else{
              if(res.retData.sex === 'F'){
                this.headfimg = require('../userInfo/image/women.png');
              }else if(res.retData.sex === 'M'){
                this.headfimg = require('../userInfo/image/man.png');
              }
            }
          }else{
            console.log(res.retMsg);
          }
        }).catch( res=>{

          //TODO
        });

      },
      goHome() {
        this.$router.push({ path:'/main' });
      }
    },
    data() {
      return {
        headfimg: '',
        sexf: '',
        userName: '',
        userPhone: '',
        userMobile: '',
        userEmail: '',
        rsFullName: '',
        jobcodeDescr: '',
        emplid: ''
      }
    }
  }
</script>
<style lang="scss" scoped>

  .content {
    .top-bg {
      position: relative;
      width: 100%;
      height: 150px;
      background: url('./image/userbg.png') no-repeat;
      background-size: cover;
      .portrait {
        position: absolute;
        width: 140px;
        height: 140px;
        background-size: 100% 100%;
        padding: 1px;
        top: 80px;
        left: 50%;
        margin-left: -70px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
      }
    }
    .uinfo {
      margin-top: 90px;
      h6 {
        display: inline-block;
        margin-top: 10px;
        line-height: 1.8;
      }
      img {
        width: 20px;
        vertical-align: middle;
        padding-right: 5px;
        margin-top: 10px;
      }
    }

    .sub-btn-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 30px;
      .sub-detail{
        width: 50%;
        height: 32px;
        display: flex;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        background-color: #1CAAFE;
        color: white;
        box-shadow: 3px 3px 5px #888888;
    }
  }
  }
</style>
